import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Button, List, Popup } from 'antd-mobile';
import './Com/Setting.css';

const Setting: React.FC = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const [popupContent, setPopupContent] = useState<{title: string, content: string}>({
    title: '',
    content: ''
  });

  const handleBack = () => {
    navigate('/app/my');
  };

  const handleLogout = () => {
    // 清除用户登录信息（双token）
    localStorage.removeItem('accessToken');
    localStorage.removeItem('refreshToken');
    localStorage.removeItem('userInfo');
    
    // 跳转到登录页面
    navigate('/login');
  };

  const showPopup = (title: string, content: string) => {
    setPopupContent({ title, content });
    setVisible(true);
  };

  const platformContent = `
    社区团购平台资质说明
    
    一、平台基本信息
    • 平台名称：优选社区团购
    • 运营主体：优选电子商务有限公司
    • 统一社会信用代码：91110000000000000X
    • 注册地址：北京市朝阳区xxx街道xxx号
    • 联系电话：400-123-4567
    
    二、经营资质
    • 增值电信业务经营许可证：京B2-20210001
    • 网络食品销售备案：京网食备字(2021)第000001号
    • 食品经营许可证：JY11105000000001
    • 营业执照注册号：110000000000001
    
    三、平台承诺
    • 严格遵守《电子商务法》等相关法律法规
    • 保障消费者合法权益
    • 建立完善的商品质量保证体系
    • 提供优质的售后服务
    
    四、监管信息
    • 监管部门：北京市市场监督管理局
    • 投诉举报电话：12315
    • 平台自律承诺：诚信经营，规范服务
  `;

  const userAgreementContent = `
    用户服务协议
    
    一、协议的范围
    本协议是您与优选社区团购平台（以下简称"平台"）之间关于您使用平台服务所订立的协议。
    
    二、用户注册与账户
    1. 用户注册时应提供真实、准确、完整的个人信息
    2. 用户应妥善保管账户信息，对账户活动承担责任
    3. 禁止恶意注册、批量注册账户
    
    三、平台服务
    1. 平台提供社区团购商品展示、订购、配送等服务
    2. 平台有权根据运营需要调整服务内容
    3. 平台保留对违规用户采取限制措施的权利
    
    四、用户义务
    1. 遵守国家法律法规和平台规则
    2. 不得利用平台从事违法违规活动
    3. 不得恶意差评、恶意投诉
    4. 尊重他人合法权益
    
    五、商品与订单
    1. 商品信息仅供参考，以实际收到商品为准
    2. 订单一经确认，不得随意取消
    3. 支持7天无理由退换货（特殊商品除外）
    
    六、免责条款
    1. 因不可抗力因素造成的损失，平台不承担责任
    2. 因用户操作不当造成的损失，平台不承担责任
    3. 第三方服务提供商的责任由其自行承担
    
    七、协议变更
    平台有权根据业务发展需要修改本协议，修改后的协议将在平台公布。
    
    八、争议解决
    因本协议产生的争议，双方应友好协商解决；协商不成的，提交平台所在地人民法院处理。
  `;

  const privacyContent = `
    隐私保护政策
    
    一、信息收集
    1. 注册信息：姓名、手机号、收货地址等
    2. 订单信息：购买记录、支付信息、配送信息
    3. 设备信息：设备型号、操作系统、IP地址
    4. 使用信息：浏览记录、搜索记录、购买偏好
    
    二、信息使用
    1. 提供团购服务和客户支持
    2. 处理订单和安排配送
    3. 改善用户体验和产品功能
    4. 进行数据分析和市场研究
    5. 发送重要通知和服务信息
    
    三、信息共享
    1. 不会向第三方出售您的个人信息
    2. 仅在以下情况下共享信息：
       • 获得您的明确同意
       • 履行法律义务
       • 保护平台和用户安全
       • 业务合作需要（严格保密）
    
    四、信息安全
    1. 采用SSL加密技术保护数据传输
    2. 建立完善的数据安全管理制度
    3. 定期进行安全审计和漏洞修复
    4. 严格控制员工访问权限
    
    五、Cookie使用
    1. 使用Cookie改善用户体验
    2. 记住用户登录状态和偏好设置
    3. 提供个性化推荐服务
    4. 用户可以选择禁用Cookie
    
    六、未成年人保护
    1. 不主动收集未成年人信息
    2. 如发现未成年人信息，将及时删除
    3. 建议未成年人在监护人指导下使用服务
    
    七、用户权利
    1. 查询个人信息
    2. 更正错误信息
    3. 删除个人信息
    4. 撤回授权同意
    5. 获取信息副本
    
    八、联系我们
    如对隐私政策有疑问，请联系：
    • 邮箱：privacy@youxuan.com
    • 电话：400-123-4567
    • 地址：北京市朝阳区xxx街道xxx号
  `;

  return (
    <div className="setting-container">
      <NavBar onBack={handleBack} back="返回">
        设置
      </NavBar>
      
      <div className="setting-title">
        <h4 style={{textAlign: 'center'}}>社区团购</h4>
      </div>
      
      <div className="setting-content">
        <List>
          <List.Item 
            onClick={() => showPopup('平台资质', platformContent)}
            clickable
          >
            平台资质
          </List.Item>
          
          <List.Item 
            onClick={() => showPopup('用户协议', userAgreementContent)}
            clickable
          >
            用户协议
          </List.Item>
          
          <List.Item 
            onClick={() => showPopup('隐私协议', privacyContent)}
            clickable
          >
            隐私协议
          </List.Item>
        </List>
        
        <div className="logout-section">
          <Button 
            color="danger" 
            size="large" 
            onClick={handleLogout}
            block
          >
            退出登录
          </Button>
        </div>
      </div>

      <Popup
        visible={visible}
        onMaskClick={() => setVisible(false)}
        position="left"
        bodyStyle={{ width: '85vw', padding: '20px' }}
      >
        <div className="popup-content">
          <div className="popup-header">
            <h3>{popupContent.title}</h3>
            <Button 
              fill="none" 
              size="mini"
              onClick={() => setVisible(false)}
            >
              关闭
            </Button>
          </div>
          <div className="popup-body">
            <pre>{popupContent.content}</pre>
          </div>
        </div>
      </Popup>
    </div>
  );
};

export default Setting;